<template>
	<view>
		<u-sticky>
		<view class="tabs w-100 bg-white">
			<view class="w-100 d-flex justify-content-between align-items-center bg-white">
				<u-tabs class="tab-box" bg-color="#ffffff" :is-scroll="false" inactive-color="#999" name="name" :list="tabs" active-color="#616161" :current="current" @change="tabChange"></u-tabs>
				<view class="filtrate mr-20 text-color-grey" :class="filterCount>0?'filtrate-ing':''" @tap="filter">筛选{{filterCount>0?'·'+filterCount:''}}<u-icon class="ml-10" :name="filterIsShow?'arrow-up-fill':'arrow-down-fill'" size="20"></u-icon></view>
			</view>
			<view v-if="filterIsShow" class="w-100 bg-white filtrate-content">
				<scroll-view class="filter-scroll" scroll-y="true">
					<view class="filter-item text-color-grey">
						<view class="mb-20 font-weight-bold">场地类型</view>
						<view class="tags">
							<view class="tag" :class="typeTagCurrent==0?'select':''" @tap="filterTagType('all')">全部</view>
							<view class="tag" v-for="(item,index) in initialize.spaceTypeTags" :class="index+1==typeTagCurrent?'select':''" :key="item.id" @tap="filterTagType(index)">{{item.label}}</view>
						</view>
					</view>
				</scroll-view>
				<view class="w-100 d-flex justify-content-between p-20">
					<button class="filter-clear mr-30" type="default" @tap="filterClear">清除</button>
					<button class="filter-confirm" type="primary" @tap="filterConfirm">确认</button>
				</view>
			</view>
		</view>
		</u-sticky>
		
		<view class="p-20">
			<fuzzy-location v-if="current==2" ref="fuzzyLocation" :currentCity="currentCity" @over="locationOver" @change="changeCity"></fuzzy-location>
			<post-space-list :list="lists" :loadStatus="loadStatus"></post-space-list>
		</view>
		
		<!-- 发布按钮 -->
		<view @tap="handelAdd" class="plus-box">
			<u-icon name="plus" color="#fff" size="30"></u-icon>
		</view>
		
		<!-- 遮照层 -->
		<view v-if="filterIsShow" class="popup-bg" catchtouchmove="true"></view>
		
		<!-- 登录popup -->
		<login-popup ref="loginPopup"></login-popup>
	</view>
</template>

<script>
	import {mapState, mapMutations } from 'vuex'
	import postSpaceList from '../../components/post-space-list/post-space-list.vue';
	import fuzzyLocation from '../../components/location/fuzzy-location.vue';
	import loginPopup from "@/components/login-popup/login-popup.vue"
	export default {
		components: {
			postSpaceList,
			fuzzyLocation,
			loginPopup
		},
		computed:{
			...mapState(['initialize', 'hasLogin', 'currentCity']),
		},
		data() {
			return {
				tabs: [{name: '最新',value:1},{name: '推荐',value:2},{name: '同城',value:3}],
				current:1,
				page:1,
				lists:[],
				loadStatus:'loading',
				filterIsShow:false,
				typeTagCurrent:0,
				filterCount:0,
				selectCity:''
			}
		},
		onLoad() {
			this.getSpace();
		},
		methods: {
			tabChange(index) {
				if(this.current==index) return;
				this.current = index;
				this.page = 1;
				this.loadStatus = 'loading';
				this.lists = [];
				
				if(index==2) {
					if(!this.currentCity.value) {
						this.$nextTick(()=>{
							this.$refs.fuzzyLocation.getFuzzyLocation();
						})
					}else{
						this.getSpace();
					}
				}else{
					this.getSpace();
				}
			},
			async getSpace() {
				let params = {page:this.page,tab:this.tabs[this.current].type,currentCity:this.currentCity.value,selectCity:this.selectCity}
				if(this.filterCount>0){
					if(this.typeTagCurrent>0) {
						params.type = this.typeTags[this.typeTagCurrent].value
					}
				}
				
				this.loadStatus = 'loading';
				let res = await this.$api('space')
				this.lists = this.lists.concat(res.data.list);
				if (this.page === res.data.total_pages || res.data.total_pages === 0) {
					this.loadStatus = 'nomore';
				} else {
					this.loadStatus = 'loadmore';
				}
			},
			filter() {
				this.filterIsShow = !this.filterIsShow;
			},
			filterTagType(current) {
				if(current=='all') current=-1
				this.typeTagCurrent = current+1;
			},
			filterClear() {
				this.typeTagCurrent = 0;
				this.filterCount = 0;
				this.filterIsShow = false;
				if(this.loadStatus!='loading') {
					this.lists      = [];
					this.page       = 1;
					this.loadStatus = 'loading'
					this.getSpace();
				}
			},
			filterConfirm() {
				this.filterCount = 0;
				this.filterIsShow = false;
				if(this.typeTagCurrent) this.filterCount++
				if(this.loadStatus!='loading') {
					this.lists      = [];
					this.page       = 1;
					this.loadStatus = 'loading'
					this.getSpace();
				}
			},
			jump(url) {
				uni.navigateTo({
					url:url
				})
			},
			handelAdd() {
				if(!this.hasLogin) {
					this.$refs['loginPopup'].open();return;
				}
				
				uni.navigateTo({
					url:"/pages/post/space"
				})
			},
			locationOver() {
				this.lists = [];
				this.page = 1;
				this.loadStatus = 'loading'
				this.getSpace();
			},
			changeCity(val) {
				if(this.selectCity != val) {
					this.selectCity = val;
					this.lists = [];
					this.page = 1;
					this.loadStatus = 'loading'
					this.getSpace();
				}
			}
		}
	}
</script>

<style lang="scss">
.tabs {
	position: relative;
	z-index: 99;
	padding: 10rpx 0;
}
.tab-box {
	width: 50%;
}
.filtrate {
	background-color: #F1F1F1;
	padding: 10rpx 20rpx;
	border-radius: 10rpx;
}
.filtrate-ing {
	background-color: rgba(238,209,70, 0.6);
}
.filtrate-content {
	position: absolute;
	z-index:99;
}
.filter-scroll {
	height: 400rpx;
}
.filter-item {
	border-bottom: 2rpx solid #F5F5F5;
	padding: 30rpx 30rpx;
}
.filter-clear {
	width: 30%;
}
.filter-confirm {
	width: 70%;
}
.popup-bg{
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0;
	bottom: 0;
	background-color: rgba(1,1,1,0.3);
}
.tags {
	display: flex;
	position: relative;
	font-size: 0;
	font-family: Helvetica;
	flex-flow: wrap; 
}
.tags .tag {
	width: 150rpx;
	position: relative;
	display: inline-block;
	padding: 10rpx 0;
	color: #666;
	font-size: 28rpx;
	text-align: center;
	border-radius: 10rpx;
	background-color: #F1F1F1;
	margin-bottom: 20rpx;
	margin-right: 20rpx;
}
.tags .tag.select {
	background-color: rgb(239, 210, 52);
}

.plus-box {
	background-color: $color-primary;
	width: 100rpx;
	height: 100rpx;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	position: fixed;
	bottom: 60rpx;
	right: 30rpx;
	z-index: 999;
}
</style>
